<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.生命周期分析</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>几天是我学习Vue的第{{n}}天</h2>
			<button @click="goFront" id="btn1">往前一天</button>
			<button @click="goBack">往后一天</button>
			<button @click="goDie">不活了</button>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			const vm = new Vue({
				el:'#demo',
				/* template:`
					<div>
						<h2>几天是我学习Vue的第{{n}}天</h2>
						<h2>几天是我学习Vue的第{{n}}天</h2>
					</div>
				`, */
				data:{
					n:5
				},
				methods:{
					goFront(){
						this.n -= 1
					},
					goBack(){
						this.n += 1
					},
					goDie(){
						this.$destroy()
					}
				},
				watch:{
					n(){
						console.log('n变了')
					}
				},
				//创建之前（数据代理、数据劫持创建之前）
				beforeCreate() {
					console.log('---beforeCreate---')
					// console.log(this)
					// debugger;
				},
				//创建完毕（数据代理、数据劫持创建完毕）
				created() {
					console.log('---created---')
					// console.log(this)
					// debugger;
				},
				//挂载之前（什么叫挂载？Vue将自己的工作成果呈现到页面上，就是挂载）
				beforeMount() {
					console.log('---beforeMount---')
					// console.log(this)
					// document.getElementById('btn1').innerText = '去你的吧！'
					// debugger;
				},
				//挂载完毕
				mounted() {
					console.log('---mounted---')
					// console.log(this)
					// document.getElementById('btn1').innerText = '去你的吧'
					// debugger;
				},
				//更新之前（页面更新之前）
				beforeUpdate() {
					console.log('---beforeUpdate---')
					// console.log(this)
					// debugger;
				},
				//更新完毕（页面更新完毕）
				updated() {
					console.log('---updated---')
					// console.log(this)
					// debugger;
				},
				//销毁之前
				beforeDestroy() {
					console.log('---beforeDestroy---')
				},
				//销毁完毕
				destroyed() {
					console.log('---destroyed---')
					console.log(this)
				},
			})
		</script>
	</body>
</html>